<template>
  <el-tabs :tab-position="tabPosition" class="main-tabs" stretch type="border-card">
    <el-tab-pane label="服务">
      <div class="apply-content">
        <el-form :model="form" ref="formRef" label-width="120px" class="form-container">
          <!-- 基础信息部分 -->
          <div class="section">
            <div class="section-header">
              <div class="mark"></div>
              <div class="title">基础信息</div>
            </div>
            <div class="section-content">
              <el-form-item label="服务名称" prop="serviceName" :rules="serviceNameRules">
                <el-input v-model="form.serviceName" placeholder="请输入服务名称"></el-input>
              </el-form-item>
              <el-form-item label="别名" prop="alias">
                <el-input v-model="form.alias" placeholder="请输入别名"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="remark">
                <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入描述"></el-input>
              </el-form-item>
              <el-form-item label="源码包" prop="sourceCode">
                <el-upload
                  class="upload-demo"
                  action="#"
                  :auto-upload="false">
                  <template #trigger>
                    <el-button type="primary">选择文件</el-button>
                  </template>
                  <el-button class="ml-3" type="success">上传源码</el-button>
                  <template #tip>
                    <div class="el-upload__tip">仅支持 .zip/.tar.gz 格式文件</div>
                  </template>
                </el-upload>
              </el-form-item>
            </div>
          </div>

          <!-- 配置部分 -->
          <div class="section">
            <div class="section-header">
              <div class="mark"></div>
              <div class="title">配置</div>
            </div>
            <div class="section-content">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="CPU上限" prop="cpuLimit">
                    <el-input-number v-model="form.cpuLimit" :min="0" :precision="1" :step="0.5"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="内存上限" prop="memoryLimit">
                    <el-input-number v-model="form.memoryLimit" :min="0" :step="256"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="端口" prop="port">
                <el-input v-model="form.port" placeholder="请输入端口号"></el-input>
              </el-form-item>

              <!-- 环境变量部分 -->
              <el-form-item label="环境变量" prop="envVars">
                <div v-for="(env, index) in form.envVars" :key="index" class="env-var-item">
                  <el-row :gutter="20">
                    <el-col :span="10">
                      <el-input v-model="env.key" placeholder="Key"></el-input>
                    </el-col>
                    <el-col :span="10">
                      <el-input v-model="env.value" placeholder="Value"></el-input>
                    </el-col>
                    <el-col :span="4">
                      <el-button type="danger" @click="removeEnvVar(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </div>
                <el-button type="primary" @click="addEnvVar">添加环境变量</el-button>
              </el-form-item>

              <!-- 存储部分 -->
              <el-form-item label="存储" prop="storage">
                <el-tabs type="border-card" class="storage-tabs" v-model="tabValue">
                  <el-tab-pane label="持久卷">
                    <div class="volume-content">
                      <el-form-item label="卷名称">
                        <el-input v-model="form.persistentVolume.name" placeholder="请输入卷名称"></el-input>
                      </el-form-item>
                      <el-form-item label="容量">
                        <el-input-number v-model="form.persistentVolume.size" :min="1" :step="1"></el-input-number>
                      </el-form-item>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="临时卷">
                    <div class="volume-content">
                      <el-form-item label="卷名称">
                        <el-input v-model="form.temporaryVolume.name" placeholder="请输入卷名称"></el-input>
                      </el-form-item>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="HostPath卷">
                    <div class="volume-content">
                      <el-form-item label="卷名称">
                        <el-input v-model="form.hostPathVolume.name" placeholder="请输入卷名称"></el-input>
                      </el-form-item>
                      <el-form-item label="主机路径">
                        <el-input v-model="form.hostPathVolume.path" placeholder="请输入主机路径"></el-input>
                      </el-form-item>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </el-form-item>
            </div>
          </div>

          <div class="form-footer">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="引用">
      <el-form :model="form" ref="formRef" label-width="120px" style="margin-bottom: 10px;">
        <!-- 上半部分：基础信息 -->
        <div class="section" style="padding: 20px;">
          <el-form-item label="服务名称" prop="serviceName" :rules="serviceNameRules">
            <el-input size="large" v-model="form.serviceName" placeholder="请输入服务名称"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="remark">
            <el-input size="large" v-model="form.remark" type="textarea" placeholder="请输入描述"></el-input>
          </el-form-item>
        </div>
        <div class="form-footer">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据模型
const form = ref({
  serviceName: '',
  alias: '',
  remark: '',
  cpuLimit: 1,
  memoryLimit: 512,
  port: '',
  envVars: [],
  persistentVolume: {
    name: '',
    size: 1
  },
  temporaryVolume: {
    name: ''
  },
  hostPathVolume: {
    name: '',
    path: ''
  }
});

const tabValue = ref("持久卷");

// 环境变量操作
const addEnvVar = () => {
  form.value.envVars.push({ key: '', value: '' });
};

const removeEnvVar = (index) => {
  form.value.envVars.splice(index, 1);
};

// 表单验证规则
const serviceNameRules = [
  { required: true, message: '服务名称为必填项', trigger: 'blur' },
];
// 表单实例
const formRef = ref(null);

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value?.validate();
    // 表单验证通过后，可以处理提交逻辑
    console.log('提交数据:', form.value);
  } catch (error) {
    console.log('表单验证失败:', error);
  }
};
// 重置表单
const resetForm = () => {
  formRef.value?.resetFields();
};
</script>

<style lang="scss" scoped>
.main-tabs {
  height: 100%;
  width: 80%;
  :deep(.el-tabs__content) {
    padding: 20px;
  }
}

.apply-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section {
  margin-bottom: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  
  .section-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #EBEEF5;
    
    .mark {
      width: 4px;
      height: 16px;
      background: #409EFF;
      margin-right: 10px;
      border-radius: 2px;
    }
    
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .section-content {
    padding: 20px;
  }
}

.env-var-item {
  margin-bottom: 10px;
}

.storage-tabs {
  .volume-content {
    padding: 20px;
  }
}

.form-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.upload-demo {
  :deep(.el-upload__tip) {
    color: #909399;
    font-size: 12px;
    margin-top: 8px;
  }
}
</style>